<template>
  <!-- 提现 -->
  <view class="withdraw">
    
    <view class="">
      <view class="top">
        <view class="status_bar">
         <!-- 这里是状态栏 -->
        </view>
        <view class="fan" @click="fan()"><image src="../../../static/images/fh.png" mode="">提现</image></view>    
        <view class="title1">可提现金额(元)</view>
        <view class="monay">
          99999.999
          <text @click="jl" class="jl">提现记录</text>
        </view>
      </view>
      <view class="main">
        <view class="title">提现金额</view>
        <view class="input">
          <text>￥</text><input type="text" placeholder="请输入提现金额" />
        </view>
        <view class="content">
          <u-popup v-model="show" mode="center" width="690rpx" height="" border-radius="20" negative-top="300">
            <view class="center">
              <view class="title">添加银行卡</view>
              <u-field
                border-bottom="false"
              	v-model="mobile"
              	label="持卡人:"
              	placeholder="请填写持卡人">
              </u-field>
              <u-field
              	v-model="mobile"
              	label="开户行:"
              	placeholder="请填写开户行">
              </u-field>
              <u-field
              	v-model="mobile"
              	label="银行卡号:"
              	placeholder="请填写银行卡号">
              </u-field>
              <view  class="left" @click="show = false;">取消</view>
              <view  class="right" @click="show = false;">确定</view>
            </view>
          </u-popup>
          <view class='tan' @click="show = true" >+ 添加银行卡</view>
        </view>
        <button  type="default" class="button">确认提现</button>
      </view>
      <view class="footer">
        <view class="">
          提现说明
        </view>
        <view class="xiao">
          <view class="">1.单次最低提现100元,最高提现1000元;</view>
          <view class="">2.每笔收取提现手续费3%;</view>
          <view class="">3.提现结果请查收对应渠道服务通知;</view>
          <view class="">4.如有疑问请及时联系客服;</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
  	data() {
  		return {
        show: false
  		};
  	},
  
  	onLoad() {
  		
  	},
  	mounted() {
     
  	},
  	methods: {	
       fan(){
           uni.navigateBack()
       },
  	}
  };
  
</script>

<style lang="scss">
  .withdraw{
    background-color: #F6F6F6;
    width: 100%;
    padding-bottom: 520rpx;
  }
  .status_bar {
          height: var(--status-bar-height);
          width: 100%;
  }
  .top{
    width: 100%;
    height: 500rpx;
    color: white;
    background: linear-gradient(to right, #FA6E3F, #FEAB55);
    .fan{
      padding:0 40rpx;
      padding-top:100rpx;
      image{
      width:20rpx;
      height: 30rpx;
      padding-right: 20rpx;
      vertical-align: middle;
    }
    
  }
  .title1{
    font-size: 28rpx;
    padding:30rpx 40rpx;
    margin-top:20rpx;
    // border: 1px solid red;
  }
  .monay{
    font-size:70rpx ;
    padding:0rpx 40rpx;
    text{
      font-size: 28rpx;
      border:1rpx solid white;
      border-radius: 50rpx;
      padding:10rpx 30rpx;
      position: relative;
      bottom:50rpx;
      left:150rpx;
    }
  }
  .zhong{   
      text-align: center;
      line-height: 400rpx;
      font-size: 42rpx;
      font-weight: bold;
    }  
  }
  .main{
    width: 600rpx;
    height: 550rpx;
    margin:0 auto;
    background-color: white;
    border-radius:20rpx ;
    position: relative;
    bottom: 100rpx;
    padding:30rpx 40rpx;
    overflow: hidden;
    .title{
      
    }
    .input{
      border-bottom: 1rpx solid #C0C0C0;
      overflow: hidden;
      padding:30rpx 5rpx;
      margin-top:30rpx;
      text{
        float: left;
      }
      input{
        width: 500rpx;
        // border: 1px solid red;
        
      }
    }
    .content{
      
      .tan{
        border:0;
        box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.1);
        margin-top:50rpx;
        padding:17rpx 30rpx;
        font-size: 28rpx;
        color: #8C8C8C;
      }     
      .center{
        padding:20rpx 50rpx;
        .title{
          text-align: center;
          padding:20rpx;
        }
        
      }
      .left{
        margin-bottom:50rpx;
        margin-top:30rpx;
        text-align: center;
        float: left;
        width: 40%;
        border:1rpx solid #8C8C8C;
        border-radius: 50rpx;
        padding:15rpx;
      } 
      .right{
        margin-top:30rpx;
        text-align: center;
        padding:15rpx;
        color: white;
        float: right;
        width: 40%;
        border:0;
        border-radius: 50rpx;
        background: linear-gradient(to right, #FA6E3F, #FEAB55);
      }
    }
    .button{
      width: 580rpx;
      margin:0 auto;
      color: white;
      background: linear-gradient(to right, #FA6E3F, #FEAB55);
      border-radius: 50rpx;
      margin-top:150rpx;
      box-shadow: 1px 8px 8px 2px rgba(0, 0, 0, 0.1);
    }
  }
  .footer{
    width: 600rpx;
    margin:0 auto;
    border-radius:20rpx ;
    background-color: white;
    padding:30rpx 40rpx;
    position: relative;
    bottom: 70rpx;
    .xiao{
      font-size: 24rpx;
      margin-top:30rpx;
      line-height: 40rpx;
      color: #8C8C8C;
    }
  }
</style>
